<template>
  <el-tabs v-model="activeName2" class="demo-tabs" @tab-click="handleClick3">
    <el-tab-pane label="User" name="first">





      <div class="common-layout">
    <el-container>
      <el-aside width="300px">

      </el-aside>
      <el-container>
        <el-header>Header</el-header>
        <el-main>
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="血压监测" name="first">
        <el-form label-width="auto" style="max-width: 100%">
            <el-row>
                <el-col :span="5">
            <el-form-item label=" 身份证号:">
                <el-input
                  v-model="queryDto.idnumber"
                  placeholder="身份证号"
                ></el-input>
            </el-form-item>
            
            </el-col>
            <el-col :span="10">
            <el-form-item label="上传日期:">
      <el-date-picker
        v-model="createTimes"
        type="daterange"
        unlink-panels
        range-separator="To"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :shortcuts="shortcuts"
        :size="size"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
            </el-form-item>
                </el-col>
                <el-col :span="8">
                <el-form-item label="状态:">
                    <el-select
                    v-model="queryDto.storeid"
                    placeholder="状态"
                    size="large"
                    style="width: 240px"
                    >
                    <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.store"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
            <el-form-item label=" 姓名:">
                <el-input
                  v-model="queryDto.name"
                  placeholder="姓名"
                ></el-input>
            </el-form-item>
        </el-col>
            </el-row>
            
    <el-row style="display:flex">
        <el-button type="primary" size="small" @click="searchSysRole">
            搜索
        </el-button>
        <el-button size="small" @click="resetData">重置</el-button>
    </el-row>
</el-form>
         <!--- 角色表格数据 -->
         <el-table  :data="list" border  style="width: 100%">
                    <el-table-column prop="id" label="序号" width="60" />
                    <el-table-column prop="name" label="患者姓名" width="90" />
                    
                    <el-table-column prop="sex" label="性别"  width="60"  #default="scope">
                        {{ scope.row.sex == 1 ? '男' : '女' }}
                    </el-table-column>
                    <el-table-column prop="age" label="年龄" width="60"/>
                    <el-table-column prop="idnumber" label="身份证号" width="180"/>
                    <el-table-column prop="phone" label="联系方式"/>
                    <el-table-column prop="ccompression" label="收缩压" />
                    <el-table-column prop="dpressure" label="舒张压"  width="80" />
                    <el-table-column prop="pulse" label="脉搏"  width="80" />
                    <el-table-column prop="dateOfSurvey" label="测量日期"  width="180" />
                    <el-table-column prop="store" label="预警"  width="80" />
                    <el-table-column prop="dataSources" label="数据来源"  width="80" />
                </el-table>
                <!--分页条-->
                <el-pagination
               v-model:current-page="pageParams.page"
               v-model:page-size="pageParams.limit"
               :page-sizes="[2,5,10, 20, 50, 100]"
               @size-change="fetchData"
               @current-change="fetchData"
               layout="total, sizes, prev, pager, next"
               :total="total"
/>
      </el-tab-pane>




      <el-tab-pane label="血糖监测" name="second">
        <el-form label-width="auto" style="max-width: 100%">
            <el-row>
                <el-col :span="5">
            <el-form-item label=" 身份证号:">
                <el-input
                  v-model="queryDto1.idnumber"
                  placeholder="身份证号"
                ></el-input>
            </el-form-item>
            
            </el-col>
            <el-col :span="10">
            <el-form-item label="上传日期:">
      <el-date-picker
        v-model="createTimes1"
        type="daterange"
        unlink-panels
        range-separator="To"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        :shortcuts="shortcuts"
        :size="size"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
            </el-form-item>
                </el-col>
                <el-col :span="8">
                <el-form-item label="状态:">
                    <el-select
                    v-model="queryDto1.storeid"
                    placeholder="状态"
                    size="large"
                    style="width: 240px"
                    >
                    <el-option
                        v-for="item in options1"
                        :key="item.id"
                        :label="item.store"
                        :value="item.id"
                    />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
            <el-form-item label=" 姓名:">
                <el-input
                  v-model="queryDto1.name"
                  placeholder="姓名"
                ></el-input>
            </el-form-item>
        </el-col>
            </el-row>
            
    <el-row style="display:flex">
        <el-button type="primary" size="small" @click="searchSysRole1">
            搜索
        </el-button>
        <el-button size="small" @click="resetData1">重置</el-button>
    </el-row>
</el-form>
         <!--- 角色表格数据 -->
         <el-table :data="list1" border style="width: 100%">
                    <el-table-column prop="id" label="序号" width="60" />
                    <el-table-column prop="name" label="患者姓名" width="100" />
                    
                    <el-table-column prop="sex" label="性别"  width="60"  #default="scope">
                        {{ scope.row.sex == 1 ? '男' : '女' }}
                    </el-table-column>
                    <el-table-column prop="age" label="年龄"/>
                    <el-table-column prop="idnumber" label="身份证号"/>
                    <el-table-column prop="phone" label="联系方式"/>
                    <el-table-column prop="fbglucose" label="空腹血糖" />
                    <el-table-column prop="dateOfSurvey" label="测量日期"  width="180" />
                    <el-table-column prop="store" label="预警"  width="80" />
                    <el-table-column prop="dataSources" label="数据来源"  width="80" />
                </el-table>
                <el-pagination
               v-model:current-page="pageParams1.page"
               v-model:page-size="pageParams1.limit"
               :page-sizes="[2,5,10, 20, 50, 100]"
               @size-change="fetchData2"
               @current-change="fetchData2"
               layout="total, sizes, prev, pager, next"
               :total="total1"
/>
      </el-tab-pane>
    </el-tabs>
  </el-main>
      </el-container>
    </el-container>
      
  </div>




    </el-tab-pane>
    <el-tab-pane label="Config" name="second">Config</el-tab-pane>
    <el-tab-pane label="Role" name="third">Role</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
  </el-tabs>

    
  </template>
  <script lang="ts" setup>
  import { ref,onMounted } from 'vue'
  import type { TabsPaneContext } from 'element-plus'
  import { ElMessage, ElMessageBox } from 'element-plus'
import {GetSysRoleListByPage1,GetSysRoleListByPage2,findstore} from '@/api/zsg/intervention';
  
  const activeName = ref('first')
const activeName1 = ref('first')
const activeName2 = ref('first')
  const options=ref({})
  const options1=ref({})
  const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
  }
  const handleClick1 = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const handleClick3 = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
  }
// 分页条总记录数
let total = ref(0)
let total1 = ref(0)

// 定义表格数据模型
let list = ref([
])
let list1 = ref([
])
let tit=ref("")
const dialogVisible=ref(false)
const pageParamsForm={
    page:1,
    limit:2,
}
const pageParamsForm1={
    page:1,
    limit:2,
}
const pageParams = ref(pageParamsForm)     // 将pageParamsForm包装成支持响应式的对象
const pageParams1 = ref(pageParamsForm1)     // 将pageParamsForm包装成支持响应式的对象
// 搜索表单数据
const queryDto = ref({
})
const queryDto1 = ref({
})
// 页面加载完毕以后请求后端接口获取数据
onMounted(() => {
    fetchData() ;
    fetchData2() ;
    findstores();
    findstores1();
})
const createTimes=ref({})
const createTimes1=ref({})
const findstores=async()=>{
  const {data , code , message } = await findstore()
  options.value=data;

}
const findstores1=async()=>{
  const {data , code , message } = await findstore()
  options1.value=data;

}
// 搜索按钮点击事件处理函数
const searchSysRole = () => {
    //queryDto.value.roleName = ""
    let initialtime=createTimes.value[0];
    let endtime=createTimes.value[1];
    queryDto.value.initialtime=initialtime;
    queryDto.value.endtime=endtime;
    console.log(queryDto.value)
    fetchData() ;
}
const searchSysRole1 = () => {
    //queryDto.value.roleName = ""
    let initialtime=createTimes1.value[0];
    let endtime=createTimes1.value[1];
    queryDto1.value.initialtime=initialtime;
    queryDto1.value.endtime=endtime;
    console.log(queryDto.value)
    fetchData2() ;
}
// 远程调用后端分页查询接口
const fetchData = async () => {
    const {data , code , message } = await GetSysRoleListByPage1(pageParams.value.page , pageParams.value.limit , queryDto.value) ;
    console.log(data)
    list.value = data.list ;
    total.value = data.total
    // for(let a=0;a<=data.list.length;a++){
    //     if(data.list[a].sex=='1'){
    //         list.value[a].sex='男'
    //     }else{
    //         list.value[a].sex='女'
    //     }
        
    // }
}
const fetchData2 = async () => {
    const {data , code , message } = await GetSysRoleListByPage2(pageParams1.value.page , pageParams1.value.limit , queryDto1.value) ;
    console.log(data)
    list1.value = data.list ;
    total1.value = data.total
    // for(let a=0;a<=data.list.length;a++){
    //     if(data.list[a].sex=='1'){
    //         list.value[a].sex='男'
    //     }else{
    //         list.value[a].sex='女'
    //     }
        
    // }
}
const resetData=()=>{
    queryDto.value={}
    createTimes.value={}
}
const resetData1=()=>{
    queryDto1.value={}
    createTimes1.value={}
}
  </script>
  
  <style>
  .demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
  }
  </style>
  